<template>
  <div ref="captureArea" class="image-container">
    <!-- 底图   src="@/assets/phone-case/4.png"    src="@/assets/phone-case/1.png" -->
    <img :src="phoneCase" alt="Base Image" class="base-image" />

    <!-- 背景图片 -->
    <div class="overlay-image" :style="{ backgroundImage: backgroundImage }" />
  </div>
  <el-button @click="downloadImage">Download Images</el-button>
</template>

<script setup lang="ts">
import { useThrottleFn } from "@vueuse/core";
import { nextTick, reactive, ref, watch, watchEffect } from "vue";

import html2canvas from "html2canvas";

const phoneCase = ref("");
const backgroundImage = ref(``);

const captureArea = ref(null);
export interface IOverlayImage<T = any> {
  baseImage: "";
  overlayImage: "";
}
const arr = ["0.png"];

const props = defineProps<IOverlayImage>();
const downloadImage = async () => {
  // traverseDirectory("src/assets/backgroundImage");
  for (let i = 0; i < arr.length; i++) {
    try {
      phoneCase.value = `src/assets/phone-case/3.png`;
      backgroundImage.value = `url('src/assets/backgroundImage/${arr[i]}')`;

      const canvas = html2canvas(captureArea.value);
      await canvas.then((c) => {
        // setTimeout(async () => {
        const link = document.createElement("a");
        link.href = c.toDataURL("image/png");
        link.download = "3_" + arr[i];
        link.click();
        // }, 1000);
      });
    } catch (error) {
      console.error("下载图片失败:", error);
    }
  }
};
</script>

<style scoped>
.image-container {
  position: relative;
  width: 1000px; /* 根据图片大小调整宽度 */
  height: 1000px; /* 根据图片大小调整高度 */
  overflow: hidden;
}

/* 底图样式 */
.base-image {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* 覆盖图片样式 */
.overlay-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* width: 410px; */
  z-index: 0; /* 放在底图下面 */
  background-size: 410px 830px;
  background-position: center;
}
</style>
